<template>
  <div class="roomPlanList-content">
    <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" />
    <div class="bb"></div>
    <Search
     :style="{top: GLOBAL.currentEnvironment ? '0' : '0.3rem'}"
      ref="topSearch"
      class="search2"
      placeholder="商品名称|商品编号|订单编号"
      :isAdd="false"
      :isScreen="true"
      :isType="true"
      @onSearch="onSearch"
      @onScreen="onScreen"
    ></Search>
    <search-tag
      ref="SearchTag"
      :keyword="keywords"
      @resetCategory="resetCategory"
      @getCategory="getCategory"
      v-show="showSearchTag"
    ></search-tag>

    <div class="serach-content" :style="{top: GLOBAL.currentEnvironment ? '0.55rem' : '0.8rem'}">
      <div class="content">
        <span
          class="tapbtn"
          @click="tapChange(index)"
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ active: index == active }"
          >{{ item.name }}({{item.num}}) </span
        >
      </div>
    </div>

    <!--分页列表 -->
    <pageList
      :style="{'margin-top': GLOBAL.currentEnvironment ? '1.2rem' : '1rem'}"
      class="pageList"
      ref="pageList"
      :checkedShow="checkedShow"
      :operationTxt="operationTxt"
      :columns="columns"
      :listUrl="listUrl"
      @getCheckedValue="getCheckedValue"
      @handleList="handleList"
    >
      <div
        slot="foot"
        slot-scope="{ item }"
        style="width: 100%; text-align: right"
      >
        <a style="font-size:0.14rem" @click.stop="operation(item, [item])">{{
          active == 0 ? "手动排产" : "派发工单"
        }}</a>
      </div>
       <div slot="body" slot-scope="{ item }" class="listRow" >
        <div v-if="active==0" style="margin-bottom:0.1rem">
          <span class="key">承诺交期：</span>
          <span class="row" style="color:red">{{ item.promiseDate }}</span>
        </div>
         <div v-if="active==1" style="margin-bottom:0.1rem">
          <span class="key">计划生产时间：</span>
          <span class="row" style="color:red">{{ item.planProductTime }}</span>
        </div>
         <div class="pp">
          <span class="key">生产物品：</span>
          <span class="row">{{ item.goodsName }}|{{ item.goodsCode }}</span>
        </div>
      </div>
    </pageList>
    <van-dialog
      v-model="showDialog"
      show-cancel-button
      confirm-button-color="#1890FF"
      @confirm="submitTo"
    >
      <div
        slot="title"
        style="
          text-align: left;
          margin: 0.1rem 0.19rem;
          color: #191f25;
          font-size: 0.18rem;
        "
      >
        <van-icon name="question-o" size="0.20rem" style="float: left;" color="#FF943E"  /><span
          style="margin-left: 0.07rem"
          >确定派发生产工单吗?</span
        >
      </div>
      <div style="margin: 0.1rem 0.46rem 0.3rem 0.46rem; color: #888888">
        派发后无法撤回，为避免计划变动，建议提前一天派发第二天的生产工单
      </div>
      <div style="background: #f0f0f0; width: 100%; height: 0.01rem"></div>
    </van-dialog>
  </div>
</template>

<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import { getAction } from "@/api/manage";
import { Dialog } from "vant";
export default {
  name: "carRoomList",
  components: { Navbar, TabBar, pageList, Search, SearchTag },
  data() {
    return {
      showDialog: false,
      title: "车间计划",
      rtitle: "",
      rname: "", //search
      active: 0,
      
      tabList: [
        { name: "待排产", value: "1",num:"" },
        { name: "待派发至车间", value: "2",num:""},
      ],
      checkedShow: false, //列表是否支持选择
      operationTxt: "确定1", //选择按钮名称
      listUrl: "/planmgt/erpProductScheduling/list", //列表接口
      columns: {
        titleKey: "code", //标题
        // subtitleKey: "description",//副标题
        content: [
          //内容
          {
            name: "承交日期",
            key: ["promiseDate"],
            style: "color:red",
          },
          {
            name: "生产物品",
            key: ["goodsName", "goodsCode"],
            keySymbol: "|", //间隔符号,
            // style:"color:red"
          },
        ],
        labelKey: ["planProductNum", "chargeUserIdText"], //标签
        labelText: {
          planProductNum: "计划产出：",
          chargeUserIdText: "生产负责人：",
        }, //标签
        // operation: [
        //   //操作
        //   {
        //     name: "手动排产",
        //     icon: require("../../assets/qd.png"),
        //     remarks:
        //       "说明是的撒的撒打算大撒的多撒点打算大撒多撒打算打算打算的的撒打算大撒",
        //   },
        // ],
      },
      showSearchTag: false,
      keywords: "",
      params: {
        schedulingStatus: 1,
      },
      ids:''
    };
  },
  computed: {},
  mounted() {
    this.initData()
    this.searchQuery();
  },
  created() {

  },
  beforeRouteLeave(to, from, next) {
    let that = this;
    switch (true) {
      case that.showSearchTag && !that.$refs.SearchTag.ddthrVisible && !that.$refs.SearchTag.fzrVisible:
        that.showSearchTag = false;
        this.title = "车间计划";
        next(false);
        break;
      case that.$refs.SearchTag.ddthrVisible:
        that.$refs.SearchTag.ddthrVisible = false;
        this.title = "更多筛选";
        next(false);
        break;
      case that.$refs.SearchTag.fzrVisible:
        that.$refs.SearchTag.fzrVisible = false;
        this.title = "更多筛选";
        next(false);
        break;
      case !that.showSearchTag:
        next();
        break;
    }
  },
  methods: {
    initData(){
      getAction("/planmgt/erpProductScheduling/list", {
          schedulingStatus: 1,
          pageNo:1,
          pageSize:1000
        }).then((res) => {
          this.tabList[0].num=res.result.total
         console.log(this.resetCategory)
        });

         getAction("/planmgt/erpProductScheduling/list", {
          schedulingStatus: 2,
          pageNo:1,
          pageSize:1000
        }).then((res) => {
          this.tabList[1].num=res.result.total
           console.log(this.resetCategory)
        });
    },
    onSearch(v) {
      this.keywords = v;
      
      console.log(this.keywords);
      this.searchQuery();
    },
    onScreen() {
      this.keywords = this.$refs.topSearch.value;
      console.log("筛选");
      this.showSearchTag = true;
      // setTitle('更多筛选')
      this.title = "更多筛选";
    },
    resetCategory() {
      // this.showSearchTag = false
      this.params = {};
      // this.onSearch(this.$refs.topSearch.value)
      // setTitle(this.title)
      this.searchQuery();
    },
    getCategory(v,k) {
      // console.log("v1");
      // console.log(v);
      this.keywords=k
       this.$refs.topSearch.value = k;
      this.showSearchTag = false;
      // this.params={}
      this.params = Object.assign({}, v);
      if(this.params.createdTimeBegin!=""){
         this.params.createdTimeBegin=this.params.createdTimeBegin+" 00:00:00"
         this.params.createdTimeEnd=this.params.createdTimeEnd+" 23:59:59"
      }
      if(this.params.promiseDateBegin!=""){
         this.params.promiseDateBegin=this.params.promiseDateBegin+" 00:00:00"
         this.params.promiseDateEnd=this.params.promiseDateEnd+" 23:59:59"
      }
      // console.log("v2");
      // console.log(v);
      
      // this.onSearch(this.$refs.topSearch.value)
      // setTitle(this.title)
      this.title = "车间计划列表";
      this.searchQuery();
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    //列表点击事件
    handleList(id, item, type) {
      console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
      if (type === "列表") {
        this.$router.push({
          path: "/workshopPlanDetail",
          query: {
            id: id,
            type: this.active,
          },
        });
      }
    },
    // 加载列表
    getList() {
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 搜索
    searchQuery(v) {
      // 搜索条件
      this.params.schedulingStatus = this.active == 0 ? 1 : 2;
      let queryParam = {
        keyword: this.keywords,
        ...this.params,
      };
      this.$refs.pageList.searchQuery(queryParam);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    tapChange(obj) {
      this.active = obj;
      this.params.schedulingStatus = this.tabList[obj].value;
      this.searchQuery();
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
    operation(e, item) {
      console.log(e, this.active, "1111");
      if (this.active == 0) {
        getAction("/mess/bomInfo/checkIsBomByGoodsId", {
          goodsId: e.goodsId,
        }).then((res) => {
          console.log(res, "选择");
          if (res.code === 200) {
            this.$router.push({
              path: "/workshopPlanAdd",
              query: {
                id: e.id,
              },
            });
          } else {
            this.$toast(res.message);
          }
        });
      } else {
        let that = this;
        for (let i = 0; i < item.length; i++) {
          if (item[i].distributeStatus === "1") {
            return that.$toast(
              `生产订单编号为：${item[i].code}已经派发，请勿重复派发！`
            );
          }
        }
        if (!e.id) {
          return that.$toast("请选择生产工单");
        } else {
          that.showDialog = true;
          that.ids = e.id
          // that.submitTo(e.id);
        }
      }
    },
    submitTo() {
      let that = this;
      getAction("/planmgt/erpProductScheduling/distributeOrder", {
        ids: this.ids,
      }).then((res) => {
        if (res.code === 200) {
          that.$toast(res.message);
          that.searchQuery();
        } else {
          that.$toast(res.message);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.roomPlanList-content {
  // .bb {
  //   height: 1rem;
  // }
  .search2 {
    width: 100%;
    position: fixed;
    top: 0.3rem;
    z-index: 10;
    // border: 1px solid blue;
  }
  .pageList{
    margin-top: 1.15rem;
  }
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    // border: 1px solid red;
    background: #ffffff;
    padding: 0.16rem 0.16rem 0.16rem 0.16rem;
    position: fixed;
    z-index: 10;
    width: 100%;
    top: 0.8rem;
    // border: 1px solid red;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
   .pp{
     margin-bottom: 0.1rem;
   }
  .listRow {
    padding:0.17rem  0 0 0.17rem;
    font-size: 0.14rem;
    // margin-bottom: 0.1rem;
    // border: 1px solid red;
    .key {
      color: #888888;
      display: inline-block;
      padding-right: 0.1rem;
      // border: 1px solid red;
    }
    .value {
      color: #191f25;
      // width: 2.2rem;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
/deep/ .list .wrap .top .title{
  font-size: 0.16rem;
}
</style>